body {
	height: 100%;
	width: 100%;
	background-color: #f3f3f3;
	/* 必须设置内边距外边距为0，要不然主体会和周围有白缝 */
	margin: 0;
	padding: 0;
}
/****** 头部部分 ******/
.header-wrapper {
	width: 100%;
	height: 18vw;
	background-color: #f8f8f8;
	z-index: 999;

}
.header {
	width: 100%;
	height: 18vw;
	position: fixed;
	font-size: 4vw;
	background-color: #f8f8f8;
	z-index: 999;

	animation-fill-mode: forwards;

	display: flex;
	justify-content: space-between;
	align-items: center;
}
@keyframes self-def {
	from {height: 18vw;}
	to {height: 14vw;}
}
@keyframes self-def2 {
	from {height: 14vw;}
	to {height: 18vw;}
}
.header .header-left {
	margin-left: 2vw;
	display: flex;
	justify-content: left;
	align-items: center;
}
.header .header-left img {
	width: 12vw;
	border-radius: 5em;
	animation: none;
	animation-fill-mode: forwards;
}
@keyframes self-def-img {
	from {width: 12vw;opacity: 1;}
	to {width: 6vw;opacity: 0;}
}
@keyframes self-def-img2 {
	from {width: 6vw;opacity: 0;}
	to {width: 12vw;opacity: 1;}
}
.header .header-left p {
	margin-left: 2vw;
}
.header .header-right {
	font-size: 5vw;
	margin-right: 2vw;
}
.header .header-right i {
	margin-right: 2vw;
}
/****** 主体部分 ******/
.main {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
	/*第一部分*/
.main .module1 {
	width: 90%;
	background-color: #fafad2;
	padding: 3vw;
	border-radius: 2vw;
	border: 2px solid #ffcf00;
	display: flex;
	justify-content: space-between;
	align-items: center;

}
.main .module1 .module1-left {
	display: flex;
	flex-direction: column;
}
.main .module1 .module1-left :first-child {
	display: flex;
	justify-content: left;
	align-items: center;
}
.main .module1 .module1-left :first-child div {
	width: 4vw;
	height: 4vw;
	font-size: 2.3vw;
	color: white;
	background-color: #ffcf00;
	border-radius: 1vw;
	display: flex;
	justify-content: center;
	align-items: center;
}
.main .module1 .module1-left :first-child span {
	font-size: 3vw;
	letter-spacing: 0.25vw;
	font-weight: bold;
	margin: 0 1.5vw;
}
.main .module1 .module1-left :first-child p {
	color: red;
	background-color: #eaeaa3;
	font-size: 3vw;
	padding: 0.1vw 0.75vw;
	margin: 0;
	border-radius: 1vw;
}
.main .module1 .module1-left :last-child {
	margin: 1vw;
	font-size: 3.5vw;
	font-weight: bold;
	display: flex;
	justify-content: center;
	align-items: center;
}
.main .module1 .module1-left :last-child span {
	color: red;
	font-size: 4vw;
}
.main .module1 .module1-right {
	color: white;
	font-size: 3vw;
	letter-spacing: 0.25vw;
	background: linear-gradient(to right, #e0bc11, red);
	padding: 1.5vw 2.5vw;
	border-radius: 2vw;
	display: flex;
	justify-content: center;
	align-items: center;
}
	/*第二部分*/
.main .module2 {
	width: 90%;
	padding:  0 3vw;
	background-color: white;
	border-radius: 2vw;
	margin-top: 3vw;
}
.main .module2 .module2-1 {
	font-size: 3.5vw;
	letter-spacing: 0.25vw;
	font-weight: bold;
}
.main .module2 .module2-2 {
	margin-bottom: 2vw;
	display: flex;
	justify-content: left;
	align-items: center;
	flex-wrap: wrap;
}
.main .module2 .module2-2 img {
	margin: 1vw;
}
.main .module2 .module2-2 div {
	width: 33.3333%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.main .module2 .module2-2 div :first-child {
	font-size: 3.5vw;
	display: flex;
	justify-content: center;
	align-items: center;
}
.main .module2 .module2-2 div p {
	font-size: 2.5vw;
	color: #7c7c7c;
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}
.main .module2 .module2-2 div p span {
	font-size: 4vw;
	color: red;
	margin: 1vw;
}
	/*第三部分*/
.main .module3 {
	width: 90%;
	padding:  0 3vw;
	background-color: white;
	border-radius: 2vw;
	margin-top: 3vw;
	position: relative;
}
.main .module3 p {
	font-size: 3.5vw;
	font-weight: bold;
}
.main .module3 .module3-list {
	width: 100%;
	margin-bottom: 3vw;
	display: flex;
	justify-content: left;
	align-items: center;
}
.main .module3 img {
	width: 30%;
}
.main .module3 .module3-zhezhao { /*用一个div容器做出遮罩的效果*/
	width: 25%;
	height: 60%;
	position: absolute; /*遮罩层设置为绝对定位，但是父容器必须是相对定位，即遮罩层相对父容器定位*/
	left: 75%;
	font-size: 3vw;
	letter-spacing: 0.5vw;
	background-color: rgba(255, 255, 255, 0.8);/*白色遮罩，设置一下不透明度即可*/

	display: flex;/*遮罩层内的文字上下左右居中*/
	justify-content: center;
	align-items: center;
}
.main .module3 .module3-zhezhao i {
	color: #7c7c7c;
	margin-left: 2vw;/*图标要与文字隔开一段距离*/
}
	/*第四部分*/
.main .module4 {
	width: 90%;
	padding:  0 3vw;
	background-color: white;
	border-radius: 2vw;
	margin-top: 3vw;
}
.main .module4 .module4-part1 {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.main .module4 .module4-part1 div {
	width: 20%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.main .module4 .module4-part1 p {
	font-size: 3.5vw;
	font-weight: bold;
}
.main .module4 .module4-part1 span {
	font-size: 3.2vw;

}
.main .module4 .module4-part1 .fa-circle {
	color: red;
	font-size: 2vw;
}
.main .module4 .module4-part1 .fa-angle-right {
	font-size: 3.5vw;
}
.main .module4 .module4-part2 {
	width: 100%;
	margin: 2vw 0 3vw 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.main .module4 .module4-part2 .part2-wrapper {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.main .module4 .module4-part2 .part2-wrapper p {
	margin: 1vw 0;
}
.main .module4 .module4-part2 .part2-wrapper .part2-line1 {
	font-size: 4vw;
	font-weight: bold;
}
.main .module4 .module4-part2 .part2-wrapper .part2-line1 span {
	font-size: 3vw;
	font-weight: normal;
}
.main .module4 .module4-part2 .part2-wrapper .part2-line2 {
	font-size: 3vw;
}
.main .module4 .module4-part2 .part2-wrapper .part2-line3 {
	font-size: 2.5vw;
	color: #7c7c7c;
}
.main .module4 .module4-part2 .part2-wrapper div {
	position: absolute;
	color: white;
	background-color: red;
	padding: 1vw 2vw;
	border-radius: 2vw;
	top: -2vw;
	right: -3vw;
}
	/*第五六七部分*/
.main .module567 {
	width: 90%;
	padding:  0 3vw;
	background-color: white;
	border-radius: 2vw;
	margin-top: 3vw;
}
.main .module567 p {
	font-size: 3.5vw;
	font-weight: bold;
}
.main .module567 .module567-list {
	width: 100%;
	margin-bottom: 3vw;
	font-size: 3vw;
	display: flex;
	flex-wrap: wrap;
	justify-content: left;
	align-items: center;
}
.main .module567 .module567-list img {
	margin-bottom: 1vw;
}
.main .module567 .module567-list div {
	width: 25%;
	margin-bottom: 4vw;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
/****** 底部菜单栏部分 *******/
.footer-wrapper {
	width: 100%;
	height: 11vw;
	margin-top: 5vw;
}
.footer {
	width: 100%;
	height: 14vw;
	margin-top: 5vw;
	border-top: 1px solid #eeeeee;
	background-color: white;

	position: fixed;
	left: 0;
	bottom: 0;

	display: flex;
	justify-content: space-around;
	align-items: center;
}
.footer div {
	width: 25%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.footer div i {
	border: 1px solid;
	padding: 1vw;
	border-radius: 5vw;
	color: #fafad2;
	background-color: #ffcf00;
}
.footer div span {
	font-size: 3vw;
}